import React from "react";
import axios from "axios"
import "../css/StoreList.css"
import {connect} from "react-redux"
import {addCart} from "../route/actions"
class StoreList extends React.Component {
  constructor(props) {
    super(props);
    this.state={
        syoreList:[]
    }
  }

  render() {
    return (
        <div className="list_head">
            <ul>
                {
                    this.state.syoreList.map((element)=>{
                        return <li>
                            <div className="list_head_img">
                                <img src={element.productImage}></img>
                            </div>
                            <div className="list_head_nr">
                                <h3>{element.productName}</h3>
                                <p className="p">{element.salePrice}￥</p>
                            </div>
                            <div className="list_head_but">
                                <button onClick={()=>{
                                    this.props.addItemToCart(addCart(element))
                                }}>加入购物车</button>
                            </div>
                        </li>
                    })
                }
            </ul>
            <div>
          <button
            onClick={() => {
              this.props.history.push("/cart");
            }}
          >
            购物车
          </button>
        </div>
        </div>
    );
  }


  componentDidMount(){
    axios.get("http://localhost:3000/data.json").then((res)=>{
        // console.log(res);
        this.setState({
            syoreList:res.data.result.list
        })
    })
  }





}


function mapStateToProps(rootReducer){
    return {
        
    }
}


function mapActionTOProps(dispatch){
    return{
        addItemToCart:(action)=>{
            dispatch(action)
        }
    }
}




export default connect(mapStateToProps,mapActionTOProps)(StoreList);
